<template>
  <div style="height: 100%">

    <!--    单篇文章-->
    <div class="single_article shadow" v-for="the_article in the_article_lists"
         @click="toArticleDetails(the_article.aid)">
      <!--      标题-->
      <div align="center">
        <a href="" style="font-size: 2em;color: #000000">{{the_article.theTitle}}</a>
      </div>
      <!--      简单数据-->
      <div align="center"
           style="font-size: 1.0em;color: #5f636c;padding-bottom: 5em;margin-top: 1em">
        <i class="el-icon-time"></i> {{the_article.updateTime}}
        <el-divider direction="vertical"></el-divider>
        <i class="el-icon-ice-cream-square"></i> {{the_article.thumbUpFor}}
        <el-divider direction="vertical"></el-divider>
        神奇的数字: {{the_article.browseTheNumber}}
      </div>
      <!--      内容-->
      <div style="padding-bottom: 5em">
        {{the_article.briefContent}}
      </div>
      <div align="center">
        <router-link :to="{
       path: '/theArticleDetails',
       query: {aid: the_article.aid}}" style="border-style: solid;
         border-width: 2px 2px;
         color: #000000;padding: 0.3em;
         margin-bottom: 2%">
          查看全文>>
        </router-link>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'ClassifiedArticles',
    data() {
      return {
        the_article_lists: [],
        cid: 0,
      };
    },
    mounted() {
      const that = this;
      that.cid = that.$route.query.cid;
      that.$http.get(`${that.ARTICLE_API}/category-article-list/${that.cid}`).then((res) => {
        that.the_article_lists = res.data.result;
      });
    },

    create() {
    },
    methods: {

    },

  };
</script>

<style scoped>

</style>
